<template>
  <div>
    <page-search
      :search-form-config="searchFormConfig"
      @resetBtnClick="handleResetClick"
      @queryBtnClick="handleQueryClick"
    />
  </div>
  <div class="h-4 bg-gray-500"></div>
  <div>
    <page-content
      ref="pageContentRef"
      :content-table-config="contentTableConfig"
      page-name="user"
      @createBtnClick="handleCreateClick"
      @editBtnClick="handleEditClick"
    />
  </div>
  <div>
    <page-modal
      ref="pageModalRef"
      :modal-form-config="modalConfigRef"
      :defaultInfo="defaultInfo"
      page-name="user"
    ></page-modal>
  </div>
</template>

<script setup lang="ts">
import PageSearch from '@/components/page-search'
import PageContent from '@/components/page-content'
import PageModal from '@/components/page-modal'

import { searchFormConfig } from './config/searchFormConfig'
import { contentTableConfig } from './config/contenTableConfig'
import { modalFormConfig } from './config/modalFormConfig'

import { usePageSearch } from '@/hooks/usePageSearch'
import { usePageModal } from '@/hooks/usePageModal'
import { useStore } from '@/store'
import { computed } from 'vue'

const [pageContentRef, handleResetClick, handleQueryClick] = usePageSearch()

//1.设置密码选项的显示与隐藏，页面自己的逻辑一般不抽取
const createCb = () => {
  const pwdItem = modalFormConfig.formItems.find(
    (item) => item.field === 'password'
  )
  pwdItem.isHidden = false
}
const editCb = () => {
  const pwdItem = modalFormConfig.formItems.find(
    (item) => item.field === 'password'
  )
  pwdItem.isHidden = true
}

//2.动态添加部门和角色列表
const store = useStore()
const modalConfigRef = computed(() => {
  const roleItem = modalFormConfig.formItems.find(
    (item) => item.field === 'roleId'
  )
  roleItem.options = store.state.entireRole.map((item) => {
    return { title: item.name, value: item.id }
  })

  const departmentItem = modalFormConfig.formItems.find(
    (item) => item.field === 'departmentId'
  )
  departmentItem.options = store.state.entireDepartment.map((item) => {
    return { title: item.name, value: item.id }
  })
  return modalFormConfig
})

//3.调用hook获取公用的变量和函数
const [pageModalRef, defaultInfo, handleCreateClick, handleEditClick] =
  usePageModal(createCb, editCb)
</script>

<style scoped></style>
